<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>火花音乐</title>
    <link rel="stylesheet" type="text/css" href="../static/css/style.css"/>
    <link href="../static/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="../static/font/bootstrap-icons.css" rel="stylesheet">
    <link href="../static/css/index.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.2.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link href="/css/bootstrap_5.min.css" rel="stylesheet">
    <link href="/font/bootstrap-icons.css" rel="stylesheet">
    <link href="/css/index.css" rel="stylesheet">
    <script src="/js/jquery-1.11.2.min.js"></script>
    <script src="/js/VarGloba.js"></script>
<!--    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">-->
    <style>
    </style>
</head>
<body>
<div th:replace="../templates/nav :: nav"></div>
<!--轮播图-->
<article class="my-3" id="carouse2">
    <div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2"></div>
    <div>
        <div class="bd-example">
            <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner" style="clear: both;">
                    <div class="carousel-item active" style="z-index: -10;">
                        <img src="https://liquan-springboot-music.oss-cn-shanghai.aliyuncs.com/images/loop_img/z1.jpg" alt="First slide" style="height: 400px; width: 100%">
                    </div>
                    <div class="carousel-item" style="z-index: -10;">
                        <img src="https://liquan-springboot-music.oss-cn-shanghai.aliyuncs.com/images/loop_img/z2.jpg" alt="Second slide" style="height: 400px; width: 100%">
                    </div>
                    <div class="carousel-item" style="z-index: -10;">
                        <img src="https://liquan-springboot-music.oss-cn-shanghai.aliyuncs.com/images/loop_img/z3.jpg" alt="Third slide" style="height: 400px; width: 100%">
                    </div>
                    <div class="carousel-item" style="z-index: -10;">
                        <img src="https://liquan-springboot-music.oss-cn-shanghai.aliyuncs.com/images/loop_img/z20.jpg" alt="Second slide" style="height: 400px; width: 100%">
                    </div>
                    <div class="carousel-item" style="z-index: -10;">
                        <img src="https://liquan-springboot-music.oss-cn-shanghai.aliyuncs.com/images/loop_img/z4.jpg" alt="Second slide" style="height: 400px; width: 100%">
                    </div>
                    <div class="carousel-item" style="z-index: -10;">
                        <img src="https://liquan-springboot-music.oss-cn-shanghai.aliyuncs.com/images/loop_img/f8.jpg" alt="Second slide" style="height: 400px; width: 100%">
                    </div>
                    <div class="carousel-item" style="z-index: -10;">
                        <img src="https://liquan-springboot-music.oss-cn-shanghai.aliyuncs.com/images/loop_img/f8.jpg" alt="Second slide" style="height: 400px; width: 100%">
                    </div>
                    <div class="carousel-item" style="z-index: -10;">
                        <img src="https://liquan-springboot-music.oss-cn-shanghai.aliyuncs.com/images/loop_img/z23.jpg" alt="Second slide" style="height: 400px; width: 100%">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
</article>


<div class="big4">
    <div class="gedan">
        <p style="font-size: 25px;
    font-weight: bold;
    margin-top: 3px;
    padding: 20px;
    color: #2c323b;
    letter-spacing: 0;
    text-shadow: 0px 1px 0px #e18f69, 0px 2px 0px #313335, 0px 3px 0px #2b2b2b;">歌 单 推 荐</p>
        <main class="xiaodaohang" style="width: 100%;margin-top: -20px">
                <div class="album py-5 bg-light">
                    <div class="container" style="margin-top: -30px">
                        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-6 g-3">
                            <div class="col" style="margin-top: -10px" th:each="musiclist:${musicList}">
                                <a th:href="'/musiclistShow/'+${musiclist.getList_id()}">
                                    <div class="card shadow-sm" style="width: 200px;margin: 5px;">
                                        <img src="https://img1.baidu.com/it/u=3316754777,2519856621&fm=253&fmt=auto&app=138&f=JPEG?w=653&h=500" th:src="${musiclist.getList_photourl()}" width="200" height="200">
                                        <p class="card-text" th:text="${musiclist.getList_name()}"></p>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <small class="text-muted"><span style="font-size: 8px;color: #777;display: block;">播放量：<span th:text="${musiclist.getList_sum()}">640万</span></span></small>
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <span style="width: 40%;"><a href="/musiclist">更多>>></a></span>
            </main>
    </div>
</div>


<div class="big5">
    <div class="paihang">
        <p class="da">巅 峰 排 行</p>
        <ul>
            <li class="back1">
                <img src="images/paihang-1.png" width="225.2px" height="500px">
                <div class="shang tong">
                    <p class="da1">网络流行榜</p>
                    <p style="font-size: 30px;font-weight: bold;">流行</p>
                </div>
                <div class="xia tong">
                    <p>
                        <a class="topline rQi1" href="/musicruning/1400256289">1. &nbsp 你的答案</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">阿冗</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1842025914">1. &nbsp 这世界那么多人</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">莫文蔚</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1807537867">1. &nbsp 四季予你</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">程响</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/208902">1. &nbsp 红色高跟鞋</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">蔡健雅</a>
                    </p>
                </div>
            </li>
            <li class="back2"><img src="images/paihan-2.png" width="225.2px" height="500px">
                <div class="shang tong">
                    <p>欧美音乐榜</p>
                    <p style="font-size: 30px;font-weight: bold;	">好听</p>
                </div>
                <div class="xia tong">
                    <p>
                        <a class="topline rQi1" href="/musicruning/1401302504">2. &nbsp Say So</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">Doja Cat</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/16232697">2. &nbsp Because of You</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">Kelly Clarkson</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/28208212">2. &nbsp I Miss You</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">Czarina</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1913421961">2. &nbsp Light Switch</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">Charlie Puth</a>
                    </p>
                </div>
            </li>
            <li class="back3"><img src="images/paihan-3.jpg" width="225.2px" height="500px">
                <div class="shang tong">
                    <p>古装金曲榜</p>
                    <p style="font-size: 30px;font-weight: bold;	">经典</p>
                </div>
                <div class="xia tong">
                    <p>
                        <a class="topline rQi1" href="/musicruning/108143">1. &nbsp问 (Live)</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">梁静茹</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/158093">2. &nbsp忘了你忘了我</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">王杰</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1855073420">3. &nbsp光辉岁月</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">Beyond</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/26620756">4. &nbsp当爱已成往事</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">张国荣</a>
                    </p>
                </div>
            </li>
            <li class="back4"><img src="images/paihan-4.jpg" width="225.2px" height="500px">
                <div class="shang tong">
                    <p>网易热门榜</p>
                    <p style="font-size: 30px;font-weight: bold;	">最热</p>
                </div>
                <div class="xia tong">
                    <p>
                        <a class="topline rQi1" href="/musicruning/1383011509">1. &nbsp我要的</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">C.vo</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1906045793">2. &nbsp漫天星光（纯音乐版）</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">CMJ</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1359179539">3. &nbsp锦中客</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">国风堂</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1307591526">4. &nbsp网易云</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">姜云升</a>
                    </p>
                </div>
            </li>
            <li class="back5"><img src="images/paihan-5.jpg" width="225.2px" height="500px">
                <div class="shang tong">
                    <p>爱国热血榜</p>
                    <p style="font-size: 30px;font-weight: bold;	">热血</p>
                </div>
                <div class="xia tong">
                    <p>
                        <a class="topline rQi1" href="/musicruning/1304261116">1. &nbsp我和我的祖国</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">中央乐团合唱团</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1840861309">2. &nbsp万疆</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">李玉刚</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1885551650">3. &nbsp少年中国说</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">张杰</a>
                    </p>
                    <p>
                        <a class="topline rQi1" href="/musicruning/1894606139">4. &nbsp一起向未来</a>
                        <a class="rQi1" href="#" style="margin-left: 42px">易烊千玺</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script>
    function iflogin(url) {
        $.ajax({
            type:"get",
            url:BaseURL+"IfLogin",
            dataType:"json",
            success:function (data){
                console.log(data);
                if (data == -1){
                    alert("你还没有登录哦");
                } if(data == 0){
                    window.location.href = BaseURL+url;
                }
            }
        })
    }
</script>
</html>



